<template>
  <el-dialog :title="isEdit ? '编辑管理员' : '添加管理员'" :visible="dialogVisible" width="30%" :before-close="handleClose">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
      <el-form-item label="账号" prop="username" placeholder="请输入账号">
        <el-input v-model="ruleForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass" placeholder="请输入密码">
        <el-input v-model="ruleForm.pass"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="repass" placeholder="请再次输入密码">
        <el-input v-model="ruleForm.repass"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name" placeholder="请输入姓名">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="联系方式" prop="tel" placeholder="请输入联系方式">
        <el-input v-model="ruleForm.tel"></el-input>
      </el-form-item>
      <el-form-item label="角色" prop="typeid">
        <el-select v-model="ruleForm.typeid" placeholder="请选择角色">
          <el-option v-for="(item, index) in roleData" :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit('ruleForm')">确 定</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { list } from "../api/role";
import { add } from "../api/administrator";
export default {
  name: "DialogAdministrator",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
    editData: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    var validateUsername = (rule, value, callback) => {
      let reg = /^[\u4e00-\u9fa5a-zA-Z][\u4e00-\u9fa5a-zA-Z0-9_.-]{1,15}$/;
      if (!reg.test(value)) {
        return callback(new Error("账号支持中文，字母不能以数字开头2-16位"));
      }
      callback();
    };
    var validatePass = (rule, value, callback) => {
      let reg =
        /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/;
      if (!reg.test(value)) {
        return callback(
          new Error("密码长度6-16位，包含数字、大小写字母、特殊字符")
        );
      }
      callback();
    };
    var validaterePass = (rule, value, callback) => {
      if (this.ruleForm.pass) {
        if (value !== this.ruleForm.pass) {
          return callback(new Error("两次密码不一致"));
        } else {
          callback();
        }
      }
      callback();
    };
    var validateTel = (rule, value, callback) => {
      let reg =
        /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/;
      if (!reg.test(value)) {
        return callback(new Error("手机号码格式不正确"));
      }
      callback();
    };
    return {
      ruleForm: {},
      rules: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { validator: validateUsername, trigger: "blur" },
        ],
        pass: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: validatePass, trigger: "blur" },
        ],
        repass: [
          { required: true, message: "请再次输入密码", trigger: "blur" },
          { validator: validaterePass, trigger: "blur" },
        ],
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          // { validator: validaterePass, trigger: 'blur' },
        ],
        tel: [
          { required: true, message: "请输入联系方式", trigger: "blur" },
          { validator: validateTel, trigger: "blur" },
        ],
        typeid: [{ required: true, message: "请选择角色", trigger: "change" }],
      },
      roleData: [],
    };
  },
  created() {
    this.getRoleList();
  },
  methods: {
    async getRoleList() {
      let {
        data: { list: listData },
      } = await list();
      this.roleData = listData;
    },
    handleSubmit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          delete this.ruleForm.repass;
          await add(this.ruleForm);

          this.$message.success("添加成功");
          //清空表单
          this.ruleForm = {};
          //清空验证
          this.$refs[formName].resetFields();
          this.$emit("refreshList");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleCancel() {
      //清空表单
      this.ruleForm = {};
      //清空验证
      this.$refs["ruleForm"].resetFields();
      this.$emit("handleCancel", false);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          this.handleCancel();
          done();
        })
        .catch(() => { });
    },
  },
  watch: {
    isEdit(newValue) {
      console.log(newValue);
      if (newValue) {
        //深拷贝
        this.ruleForm = JSON.parse(JSON.stringify(this.editData));
        //密码字段比较特殊，遍即可不填
        // delete this.ruleForm.pass
        this.rules["pass"] = [];
        this.rules["repass"][0].required = false;
      }
    },
  },
};
</script>
